import React, { useEffect, memo, useState, useRef } from "react";
import { Table, Space, message, Modal, Form } from "antd";
import { deletePost, getPostList, takeDownPost, uploadedPost } from "@/api/modules/post";
import "./index.less";
import { PostListItem } from "@/api/interface/post";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import ViewPostDetailModal, { ViewPostDetailModalMethods } from "./components/ViewPostDetailModal";
import PostSearchForm from "./components/PostSearchForm";
import useAuthPermission from "@/hooks/useAuthPermission";
// eslint-disable-next-line react/display-name
const PostManage = memo(() => {
	// 按钮权限
	const viewPostDetailModalRef = useRef<ViewPostDetailModalMethods>(null);
	const [postList, setPostList] = useState<PostListItem[]>([]);
	const [total, setTotal] = useState(0);
	const [form] = Form.useForm();
	const [listQuery, setListQuery] = useState({
		pageNum: 1,
		pageSize: 10,
		keyword: "",
		queryType: 1,
		categoryId: ""
	});

	const getList = async () => {
		const { code, data } = await getPostList(listQuery);
		if (code === 200) {
			setPostList(data?.list || []);
			setTotal(data?.total || 0);
		}
	};

	useEffect(() => {
		getList();
	}, []);

	// 对文章的一些操作
	const { confirm } = Modal;
	const showConfirm = (postId: string) => {
		confirm({
			title: "提示",
			icon: <ExclamationCircleOutlined />,
			content: "确定删除当前文章？",
			async onOk() {
				const { code, msg } = await deletePost(postId);
				if (code === 200) {
					message.success(msg);
				}
			},
			onCancel() {
				console.log("Cancel");
			}
		});
	};

	const viewPostDetail = (postId: string) => {
		viewPostDetailModalRef?.current?.showModal(postId);
	};

	// 高级检索
	useEffect(() => {
		getList();
	}, [listQuery]);

	const handleSearch = (values: any) => {
		// 处理查询操作
		setListQuery({
			...listQuery,
			keyword: values.keyword,
			queryType: values.queryType
		});
		console.log(values);
	};
	const tableOnChange = (value: any) => {
		setListQuery({
			...listQuery,
			pageNum: value.current,
			pageSize: value.pageSize
		});
	};

	const updatePostStatus = async (postId: string, status: number) => {
		confirm({
			title: "提示",
			icon: <ExclamationCircleOutlined />,
			content: `确定要${status ? "下架" : "上架"}当前文章?`,
			async onOk() {
				const requestFn = status ? takeDownPost : uploadedPost;
				const { code, msg } = await requestFn(postId);
				if (code === 200) {
					message.success(msg);
					await getList();
				}
			}
		});
	};

	const columns: any[] = [
		{
			title: "文章名称",
			dataIndex: "postName",
			key: "postName",
			align: "center"
		},
		{
			title: "创建人账号",
			dataIndex: "username",
			key: "username",
			align: "center"
		},
		{
			title: "创建人昵称",
			dataIndex: "nickname",
			key: "nickname",
			align: "center"
		},
		{
			title: "文章浏览量",
			dataIndex: "pv",
			key: "pv",
			align: "center"
		},
		{
			title: "文章评论数量",
			dataIndex: "commentNum",
			key: "commentNum",
			align: "center"
		},
		{
			title: "文章状态",
			dataIndex: "status",
			key: "status",
			render: (status: number) => {
				return <div>{status ? "正常" : "下架"}</div>;
			},
			align: "center"
		},
		{
			title: "创建时间",
			dataIndex: "createTime",
			key: "createTime",
			align: "center"
		},
		{
			title: "操作",
			dataIndex: "postId",
			key: "postId",
			width: "150",
			render: (postId: string, row: PostListItem) => {
				return (
					<Space>
						{useAuthPermission("post:view") && <a onClick={() => viewPostDetail(postId)}>查看</a>}
						{useAuthPermission("post:update:status") && (
							<a onClick={() => updatePostStatus(postId, row.status)}>{row.status ? "下架" : "上架"}</a>
						)}
						{useAuthPermission("post:delete") && <a onClick={() => showConfirm(postId)}>删除</a>}
					</Space>
				);
			},
			align: "center"
		}
	];
	return (
		<div className="card postList-content-box">
			<div className="form">
				<PostSearchForm form={form} onSearch={handleSearch} />
			</div>
			<Table
				bordered={true}
				pagination={{
					total: total
				}}
				onChange={tableOnChange}
				dataSource={postList.map(item => {
					return {
						...item,
						key: item.postId
					};
				})}
				columns={columns}
			/>
			<ViewPostDetailModal ref={viewPostDetailModalRef} />
		</div>
	);
});

export default PostManage;
